<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <div style="height: 20px"></div>
    <HeaderComon/>
    <div style="height: 50px"></div>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
<!--    <br/>-->
    <!--    <el-row>-->
    <!--      <el-col :span="6">-->
    <!--        <div class='back'><br> 运行状态监控</div>-->
    <!--      </el-col>-->
    <!--      <el-col :span="6">-->

    <!--        <div class='back'><br> 运行状态监控</div>-->

    <!--      </el-col>-->
    <!--      <el-col :span="6">-->

    <!--        <div class='back'><br> 运行状态监控</div>-->

    <!--      </el-col>-->
    <!--      <el-col :span="6">-->

    <!--        <div class='back'><br> 运行状态监控</div>-->
    <!--        -->
    <!--      </el-col>-->
    <!--    </el-row>-->
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import HeaderComon from "@/components/header_common.vue";
import screenfull from "screenfull"

export default {
  name: "Home",
  components: {
    HelloWorld,
    HeaderComon,
  },
  activated() {
    console.log("----------进activated--------");
  },
  deactivated() {
    console.log("----------进deactivated--------");
  },
  data() {
    return {
      isFullscreen: false,

    }
  },
  methods: {
    screenfull() {
      if (screenfull.enabled) {
        console.log("错误")
        return false
      }
      this.isFullscreen = true
      screenfull.toggle()
    },
    /**

     * 是否全屏并按键ESC键的方法

     */

    checkFull() {
      let isFull = screenfull.isFullscreen || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
      console.log(screenfull.isFullscreen)
// to fix : false || undefined == undefined
      if (isFull === undefined) {
        isFull = false
        return isFull
      }
      return isFull
    },
  },
  mounted() {
    window.onresize = () => {
// 全屏下监控是否按键了ESC
//       console.log("按下ESC")
      if (!this.checkFull()) {
// 全屏下按键esc后要执行的动作
        this.isFullscreen = false
        console.log("全屏关闭")
      }
    }
  },
};
</script>


<style lang="scss" scoped>
.home {
  //background: black;
  background: url("http://www.newhlty.tz-group.com/img/bg.82f8f7db.png") top center no-repeat ;
  //padding: 10px;


}


</style>
